<#import "/layout/baseLayout.html" as layoutbase />

<#macro baseheading>

    <link href="/plugins/ALTE/plugins/iCheck/square/blue.css" type="text/css" rel="stylesheet"/>
</#macro>
<#assign baseheading = baseheading in layoutbase />

<#macro basecontent>
    <div class="login-box">
        <div class="login-logo">
            <a href="javascript:void(0)"><b>冠勇科技后台管理</b></a>
        </div><!-- /.login-logo -->
        <div class="login-box-body">
            <p class="login-box-msg"> </p>
            <div id="formcontent">
                <div class="form-group has-feedback">
                    <input type="text" class="form-control" id="username" value="" placeholder="手机号">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" class="form-control" id="password" placeholder="密码">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <span>
                        <input type="input" class="form-control" id="valcode" placeholder="验证码"  style="width:160px;display: inline;">
                        </span>
                    <span>
                    <img  src="/mortise/AuthImage?date="
                          onclick="$('#valcodeimg').attr('src','/mortise/AuthImage?date='+new
                          Date())" id="valcodeimg"  style="cursor: pointer"  /><a
                            onclick="$('#valcodeimg').click()"
                                                           style="cursor: pointer"
                                                           class="text-yellow">看不清？</a>
                </span>

                </div>
                <div class="row">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label>
                                <input id="rememberme" type="checkbox"> 记住我
                            </label>
                        </div>
                    </div><!-- /.col -->
                    <div class="col-xs-4">
                        <button type="button" id="loginBTN" class="btn btn-primary btn-block btn-flat">登录</button>
                    </div><!-- /.col -->
                </div>
            </div>



            <div class="text-red" style="text-align:right;" id="errorNote" title="错误提示"></div>
            <br>
            <!--<a href="#">忘记密码?</a>-->

        </div><!-- /.login-box-body -->
    </div><!-- /.login-box -->
</#macro>
<#assign basecontent = basecontent in layoutbase />
<#macro basefooter>
    <!-- iCheck -->
    <script src="/plugins/ALTE/plugins/iCheck/icheck.min.js"></script>
    <script>
        $(function () {
            $("#mainbody").addClass("hold-transition").addClass("login-page");
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
//            $("#formcontent").keypress(function(e){
//                var eCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
//                if (eCode == 13){
//                    $("#loginBTN").click();
//                }
//            })
            function validateInput(sender) {
                var val=$(sender).val();
                if(val.toString().trim()==""||val.toString().trim().length<4){
                    if($(sender).attr("id")=="username"){
                        $("#errorNote").html("请输入正确的手机号");
                    }else if($(sender).attr("id")=="password"){
                        $("#errorNote").html("请输入的密码");

                    }else if($(sender).attr("id")=="valcode"){
                        $(sender).val("");
                        $("#valcodeimg").click();
                        $("#errorNote").html("请输入的正确的验证码");
                    }
                    //$(sender).focus();
                    return false;
                }else{
                    $("#errorNote").html("");
                }
                return true;
            }
            $('#valcode').keydown(function(e){
                if(e.keyCode==13){
                    UserLogin();
                }
            });
            $("#loginBTN").click(function () {
                UserLogin();
            });
            function  UserLogin() {
                var mortise_VerifyCode=$.cookie("mortise_VerifyCode");
                if(validateInput($("#username"))&&validateInput($("#password"))){
                    $.post(
                        '/api/login',
                        {uid:$("#username").val(),pwd:$("#password").val(),valcode:$("#valcode").val(),remember:$("#rememberme").is(':checked'),valcodekey:mortise_VerifyCode},
                        function (data) {
                            if(data.code=="CehckCodeError"){
                                $("#errorNote").html("请输入的正确的验证码");
                                $('#valcode').val('');
                            }else if(data.code=="ServiceError"){
                                $("#errorNote").html("服务器忙碌");
                            } else if(data.code=="LoginSucess"){
                                window.location.href="/";
                                return;
                            }else{
                                $("#errorNote").html("用户名或密码错误");
                            }
                            $("#valcodeimg").click();
                        }

                    );
                }
            }
            $("#username").blur(function () {
                validateInput($("#username"));
            });
            $("#password").blur(function () {
                validateInput($("#password"));
            });
            $("#valcode").blur(function () {
                validateInput($("#valcode"));
            });
        });

    </script>
</#macro>
<#assign basefooter = basefooter in layoutbase />
<@layoutbase.doLayout title="登录"/>